FQIcon 图标
介绍
图标组件,用于展示字体图标。
用法
基本引入
import { FQIcon } from '@fq/fq-weapp-ui';
组件依赖的样式文件(仅按需引用时需要)
import '@fq/fq-weapp-ui/dist/styles/components/icon.scss';
基础用法
<FQIcon value={FQIcon.IconTypes.globalBack} />
修改颜色与大小
<FQIcon value={FQIcon.IconTypes.globalBack} size={20} color='#cccccc' />
自定义Icon类名
<FQIcon prefixClass='xxx' value={FQIcon.IconTypes.globalBack} size={20} color='#cccccc' />
可用图标
通过 FQIcon.IconTypes 获取所有可用图标名称:
| 名称 | 说明 |
|---|---|
globalBack | 全局-左-返回 |
globalUp | 全局箭头-上 |
globalRight | 全局箭头-右 |
globalDownward | 全局箭头-下 |
globalClose | 全局关闭 |
globalMore | 全局-更多 |
videoDownload | 视频-下载 |
videoPause | 视频-暂停 |
videoUnlocked | 视频-解锁 |
videoLocked | 视频-锁定 |
videoPlay | 视频-播放 |
voiceOpen | 语音-打开 |
videoFullpage | 视频-全屏 |
videoMute | 视频-静音 |
checkOutlined | 选中-轮廓 |
closeCircle | 关闭-圆形 |
API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| value | 图标名称,对应 iconfont 的值 | string | - | |
| size | 图标大小,单位 px | number | string | 24 | |
| color | 图标颜色 | string | - | |
| prefixClass | 图标类名前缀 | string | fq-ui-icon | |
| onClick | 点击事件 | CommonEventFunction | - |